<template>
  <view>
    <uni-nav-bar shadow :statusBar="true" :border="false" :fixed="true" title="工具箱" />

    <uni-grid :column="3" :showBorder="false" :square="false"  @change="gridClick" style="margin-top: 20rpx">
      <uni-grid-item v-for="(item,index) in tabList" :index="index" :key="index" style="align-items: center;">
        <uni-icons :type="item.vantIcon" size="30" style="padding-top: 20rpx"></uni-icons>
        <text style="text-align: center">{{item.text}}</text>
      </uni-grid-item>
    </uni-grid>
  </view>
</template>

<script>
import menuApi from "@/api/sys/menu";

export default {
  data() {
    return {
      tabList: [],
    };
  },
  mounted() {
    this.getNav()
  },
  methods: {
    /**
     * 获取菜单
     * */
    async getNav() {
      await menuApi.getNav().then(resnav => {
        if (resnav && resnav.success) {
          let nav = this.navTreeToList(resnav.data.nav)
          if (nav && nav.length > 2) {
            nav = nav.slice(2, nav.length + 1)
          }
          this.tabList = nav
        }
      })
    },
    navTreeToList(menuTree) {
      let menus = []
      if (menuTree) {
        for (let item of menuTree) {
          if (item.type === 1) {
            item.text = item.name
            item.icon = item.vantIcon
            item.iconSelected = item.vantIcon + '-filled'
            item.url = item.path
            menus.push(item)
          }
          if (item.children && item.children.length > 0) {
            let childIds = this.navTreeToList(item.children)
            menus = menus.concat(childIds)
          }
        }
      }
      return menus
    },
    /**
     * 点击表格
     * */
    gridClick(index) {
      let item = this.tabList[index.detail.index]
      // uni.showToast({icon: 'none',position: 'bottom', title:'暂未开发！'})
      if (item && item.url) {
        uni.navigateTo({
          url: '/pages' + item.url + '/index',
          fail: function (e){
            uni.navigateTo({
              url: "/pages/modules/sys/error/404", // 404 页面的路径
            })
          }
        })
      }
      // return true
    }
  },
}
</script>

<style lang="scss">

</style>
